<template>




  <div class="img" :style="note">

    <div style="width: 350px;height: 900px;background-color: rgba(0,0,0,0.01);margin:0px auto;text-align: center;position: relative">
      <div style="width: 350px;height: 700px;background-color: rgba(0,0,0,0.6);text-align: center;position: absolute;margin-top: 100px">
      <p style="font-size: 28px;font-family: '楷体';padding-top: 20px;color: slategray">成员录入</p>
      <hr style="width: 90%;height: 0.01px"/>
      <div style="margin-top: 20px">
        <div style="width: 100%">
          <form style="width: 100%">
            <p style="width: 100%;margin-left: 70px; text-align: left;color: slategray">请上传项目图片</p>
            <input type="file" @change="getFile($event)" style="color: slategray">
            <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
          </form>
        </div>
        <div style="margin-top: 40px">
          <el-input v-model="name" placeholder="名称" style="width: 70%;margin-top: 30px"></el-input>
          <el-input type="textarea" :rows="2" placeholder="介绍" v-model="introduce" style="width: 70%;margin-top: 30px" ></el-input>
        </div>


        <div style="width: 100%">

          <el-button  style="width: 30%;margin-top: 30px" round @click="append()" >添加</el-button>
          <!--<el-button plain style="width: 30%;margin-top: 30px" size="small" ></el-button>-->
        </div>

      </div>

    </div>


  </div>

  </div>

</template>

<script>
    export default {

      data() {
        return {
          note: {
            backgroundImage: "url(" + require("../../assets/img/starrr.jpg") + ")",
            backgroundRepeat: "no-repeat",
            backgroundSize: "1890px 1500px",
          },
          name: '',
          introduce:'',
          photoUrl: ''
        }
      },
      methods: {

        getFile: function (event) {
          this.file = event.target.files[0];
          console.log(this.file);
        },
        submit: function (event) {
          //阻止元素发生默认的行为
          var _this = this
          event.preventDefault();
          let formData = new FormData();
          // console.log(formData)
          formData.append("file", this.file)
          axios.post('/upload/singlefile', formData)
            .then(function (response) {
              //   console.log(response)
              alert(response.data);
              var a = response.data;
              //  var e=a.split("*");
              //console.log(e[1])
              _this.photoUrl = a;

              // window.location.reload();
            })
            .catch(function (error) {
              alert("上传失败");
              console.log(error);
              //window.location.reload();
            });
        },
        append() {
          console.log(this.photoUrl);
          if (this.name == "" || this.introduce== "" || this.photoUrl== "" ) {
            this.$notify({
              title: '警告',
              message: '请填写注册信息',
              type: 'warning',
              duration: 2000
            });

          } else {
            var user= JSON.parse(window.sessionStorage.getItem("user"));
            var ff=user.id
            axios.post('/workroom/appendMember', {
            uid:ff,
            namee:this.name,
            introduce:this.introduce,
            photoUrl:this.photoUrl
            }).then((response) => {

              if (response.data.states == 800) {
                console.log(response)
                this.$notify({
                  title: '成功',
                  message: '注册成功',
                  type: 'success',
                  duration: 2000
                });
                this.$router.replace('/AppendMember');
              } else{
                this.$notify.error({
                  title: '错误',
                  message: response.data.message,
                  type: 'warning',
                  duration: 0
                });
              }

            }).catch((response) => {

            })
          }

        },
      }

    }
</script>

<style scoped>

</style>
